<template>
  <div class="page-header">
  <el-page-header @back="goBack" :icon="ArrowLeftBold">
    <template #content>
      <span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon><GoodsFilled /></el-icon>商品详情</span>
    </template>
  </el-page-header>
  </div>
  <el-tabs tab-position="left" style="margin-top: 10px">
    <el-tab-pane>
      <template #label>
        <span class="custom-tabs-label">
          <el-icon><Handbag /></el-icon>
          <span>商品详情</span>
        </span>
      </template>
      <el-card style="min-height: 680px">
        <el-carousel :interval="5000" arrow="always" style="width: 700px">
          <el-carousel-item v-for="(item, index) in productPicList" :key="index">
            <el-image :src=item.picUrl style="object-fit: cover;" />
          </el-carousel-item>
        </el-carousel>
        <span style="color: #dc1010;font-size: 30px">￥{{ productInfo.price }} &nbsp;元</span>&nbsp;<br>
        <div style="padding-top: 10px">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-input-number v-model="quantity" :min="1" :max="10" @change="handleChange" />
          <el-icon v-if="productInfo.isGroup == 1" color="#f80317" size="20">
            <Stamp/>
          </el-icon>&nbsp;
            <el-button color="#0c59ec" size="large" type="primary" :icon="Star" @click="Addfavorite" >收藏</el-button>
            <el-button color="#ea0797" size="large" type="primary" :icon="ShoppingCartFull" @click="Addcart"  >加入购物车</el-button>
        </div>
        <el-descriptions style="padding-top: 10px" :title=productInfo.productName>
          <el-descriptions-item label="品牌:">
            <el-tag size="large">{{productInfo.brandName}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="商家:">
            <el-tag size="large">{{productInfo.merchantId}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="商家:">
            <el-tag size="large">{{productInfo.supplierName}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="生产日期:">{{productInfo.productionDate}}</el-descriptions-item>
          <el-descriptions-item label="保质期:">{{productInfo.shelfLife}}天</el-descriptions-item>
          <el-descriptions-item label="库存余额:">{{productInfo.productCount}}</el-descriptions-item>
          <el-descriptions-item label="商品描述:">{{productInfo.description}}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-tab-pane>
    <el-tab-pane>
      <template #label>
        <span class="custom-tabs-label">
          <el-icon><Memo /></el-icon>
          <span>商品评论</span>
        </span>
      </template>
      <el-card style="min-height: 680px;">
        <el-card v-for="(item,index) in productCommentList">
          <el-descriptions :title=item.title>
            <el-descriptions-item label="评论者："> <el-tag size="small">{{item.userId}}</el-tag></el-descriptions-item>
            <el-descriptions-item label="评论时间：">{{item.createTime}}</el-descriptions-item>
            <el-descriptions-item label="内容：">
             {{item.content}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <div v-if="orBuy !=  0 " style="display: flex; justify-content: center; align-items: center;height: 50px">
          <el-button type="warning" :icon="ChatDotRound" @click="addProductCommentDialog" style="margin: 0 auto;">去评论
          </el-button>
        </div>
      </el-card>
    </el-tab-pane>
  </el-tabs>

  <el-dialog   v-model="AddIsShowDialog" title="Warning" width="30%" align-center draggable destroy-on-close>
    <template #header>
      <h1>请评论</h1>
    </template>
    <el-form :model="addProductComment">
      <el-form-item label="评论标题" prop="title">
        <el-input
            v-model="addProductComment.title"
            clearable
            placeholder="请您评论标题"
            size="large"
        ></el-input>
      </el-form-item>
      <el-form-item label="评论内容" prop="content">
        <el-input
            v-model="addProductComment.content"
            type="textarea"
            clearable
            placeholder="请您输入评论内容"
            size="large"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button color="red" type="primary" @click="Addsubmit">确认</el-button>
        <el-button @click="Addclose">取消</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup lang="ts" name="productDetails">
import {useRouter,useRoute} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import {  ArrowLeftBold,ChatDotRound} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import {
  reqAddProductComment,
  reqOrBuyProductComment,
  reqProductCommentListInfo,
  reqProductInfo,
  reqProductPicListInfo
} from "@/api/product";
import {ResponseData} from "@/api/user/type";

const router = useRouter();
const route =  useRoute();
const productId =ref(route.query.row);
const productInfo =ref([]);
const productPicList =ref([]);
const productCommentList =ref([]);
const  orBuy = ref(0);
import { Star, ShoppingCartFull} from '@element-plus/icons-vue'
import {reqAddFavorite} from "@/api/favorite";
import useUserStore from "@/store/modules/user";
import {reqAddCart} from "@/api/cart";
let UserStore = useUserStore();
const goBack = () => {
  router.back();
};
const init = ( async ()=>{
  let res1: ResponseData  = await reqProductInfo(productId.value);
  productInfo.value = res1.data;
  let res2: ResponseData  = await  reqProductPicListInfo(productId.value)
  productPicList.value = res2.data;
  let res3: ResponseData  = await  reqProductCommentListInfo(productId.value)
  productCommentList.value = res3.data;
  let  res4: ResponseData = await reqOrBuyProductComment({productId:productId.value,userId : UserStore.id});
  orBuy.value = res4.data;
})
const Addfavorite =( async () =>{
  var res: ResponseData = await  reqAddFavorite({productId:productInfo.value.id,userId:UserStore.id});
  if(res.code == 0){
    ElMessage.success("收藏成功");
  }else {
    ElMessage.info(res.message);
  }
})
const quantity = ref(1);
const Addcart = (async (item: any) =>{
  if(quantity.value > productInfo.value.productCount){
    ElMessage.error("商品余额不足");
    quantity.value =productInfo.value.productCount;
    return
  }
  let totalPrice  = productInfo.value.price * quantity.value;
  let AddCartRequestData ={
    userId : UserStore.id,
    productId : productInfo.value.id,
    price : productInfo.value.price,
    quantity : quantity.value,
    totalPrice : totalPrice,
  }
  var res : ResponseData = await reqAddCart(AddCartRequestData);
  if(res.code == 0){
    ElMessage.success("已加入购物车");
    quantity.value = 1 ;
  }else {
    ElMessage.info(res.message);
    quantity.value = 1 ;
  }
})

const AddIsShowDialog = ref(false);
const addProductComment = reactive({
  userId : UserStore.id,
  productId : productId.value,
  orderId : Number(orBuy.value),
  title: "",
  content: "",
  auditStatus: 0
});
const addProductCommentDialog = (()=>{
  AddIsShowDialog.value = true ;
})
const Addsubmit = ( async ( ) => {
  var res = await reqAddProductComment(addProductComment);
  if(res.code == 0){
    init();
    ElMessage.success("感谢您的评论");
    AddIsShowDialog.value = false;
  }else {
    ElMessage.error(res.message);
  }
})
const Addclose = (() =>{
  AddIsShowDialog.value = false;
})

onMounted(() => {
  init();
})
</script>


<style scoped lang="scss">
.page-header{
  background: #f8f6f6;
  height: 30px;
}
</style>